<template>
    <div class="w-full p-8 flex justify-center">
        <a-form :model="formState">
            <div class="flex-between">
                <div class="font-bold">地图配置</div>
            </div>
            <a-form-item label="小程序ID:" name="map_key" required>
                <a-input v-model:value="formState.map_key" placeholder="请输入腾讯地图key"></a-input>
            </a-form-item>

            <a-button @click.prevent="onSubmit" type="primary" html-type="submit" size="large">提交保存</a-button>

        </a-form>
    </div>
</template>

<script setup lang="ts">
const formState = reactive<{
    [key: string] : string
}>({
    map_key: '',
})

const onSubmit = () => {
    alert(JSON.stringify(formState))
    reset()
}
const reset = () => {
    Object.keys(formState).forEach((key: string) => {
        formState[key] = ''
    })
}
</script>